<script>
import RightContent from './components/RightContent'
import { mapMutations, mapActions } from 'vuex'

export default {
  name: 'ecrf-detail',
  components: { RightContent },
  data() {
    return {
      webObj: {}
    }
  },
  created() {
    const tempObj = this.getUrlArgObject()
    console.log('tempObj:', tempObj)
    if (tempObj.webStr) {
      this.webObj = JSON.parse(tempObj.webStr)
    }
    console.log('webObj:', this.webObj)
  },
  mounted() {
    // 获取页面信息
    this.findSubjectInfo()
    this.getCheckTypeConfigList()
    this.handleTimeInterval()
    // hash路由发生了变化
    window.onhashchange = function () {
      console.log('The hash has changed!')
      const newHash = window.location.hash
      console.log('New hash:', newHash)
    }
  },
  methods: {
    // vuex相关
    ...mapActions('eCRFDetail', ['getSubjectInfo', 'qryCheckTypeConfigList']),
    ...mapMutations({
      setSubjectInfo: 'treatment/setSubjectInfo',
      setAudits: 'treatment/setAudits',
    }),
    ...mapActions('userData', ['qryProjectIsUpgrades']),

    // 返回url路径参数
    getUrlArgObject() {
      const local = decodeURIComponent(window.location.href)
      console.log('一进来的路径', local)
      const lastStr = local.lastIndexOf('?')
      const queryStr = local.substring(lastStr + 1).substring(0).split('&')
      const queryParams = {
        webStr: ''
      }
      for (const one of queryStr) {
        const [key, value] = one.split('=')
        queryParams[key] = decodeURIComponent(value)
      }
      return queryParams
    },
    // 切换表单
    handleSwitch() {
      console.log('切换表单')
    },
    // 查询受试者详情
    async findSubjectInfo() {
      // const params = {
      //   id: this.$route.query.id,
      //   projectId: localStorage.getItem('sys-project-id'),
      //   environment: localStorage.getItem('environment')
      // }
      const params = {
        id: '67492f685cd46cf27b9bd895',
        projectId: '67087dd485d897941a9c6f61',
        environment: '1'
      }
      const res = (await this.getSubjectInfo({ params })) || {}
      console.log('getSubjectInfo res', res)
      // sessionStorage.setItem('SUBJECT_INFO', JSON.stringify(res.data || ''))
      // const subjectInfo = JSON.parse(sessionStorage.getItem('SUBJECT_INFO'))
      // this.setSubjectInfo(subjectInfo)
    },
    // 查询核查类型列表
    getCheckTypeConfigList() {
      const params = {
        projectId: localStorage.getItem('sys-project-id'),
      }
      this.qryCheckTypeConfigList({ params }).then(res => {
        const { data, code } = res || {}
        if (code === 200) {
          sessionStorage.setItem('CHECKSELECT', JSON.stringify(data))
          const checkSelect = JSON.parse(sessionStorage.getItem('CHECKSELECT'))
          this.setAudits(checkSelect.filter(item => item.status === 1))
        }
      })
    },
    // 定时器:检查当前项目的升级情况
    handleTimeInterval() {
      if (this.$route.path.indexOf('ecrf-detail') > -1) {
        // console.log('定时器', localStorage.getItem('sys-project-code'))
        this.getProjectIsUpgrades()
        setTimeout(() => {
          this.handleTimeInterval()
        }, 5000)
      }

    },
    // 查询当前项目是否在升级中
    getProjectIsUpgrades() {
      const projectType = parseInt(localStorage.getItem('environment')) + 1
      if (localStorage.getItem('sys-project-id') && projectType) {
        const params = {
          projectId: localStorage.getItem('sys-project-id'),
          projectType: projectType
        }
        this.qryProjectIsUpgrades({ params }).then((res) => {
          const { code, data } = res
          if (code === 200 && data) {
            this.dialogVisible = true
            this.handleConfirmOpen()
          }
        })
      }
    },
    // 打开提示
    handleConfirmOpen() {
      let timer = 5 // 倒计时10秒
      const intervalId = setInterval(() => {
        if (timer <= 0) {
          this.dialogVisible = false
          clearInterval(intervalId) // 清除倒计时
          // 路由跳转
          this.$router.push({
            path: '/edc/project-list',
            name: '项目中心',
            query: {
              showMenuType: '1'
            }
          })
        } else {
          // 显示倒计时
          timer--
          this.buttonText = `(${timer})秒后跳转`
        }
      }, 1000) // 每秒减1秒
    },
  }
}
</script>

<template>
  <div class="edc-container">
    <div class="edc-gradient-head">
      <!-- 受试者基本信息card -->
      <div class="edc-testee-card">
        <div class="flex-box flex-between border-line mb-2 pb-2">
          <div class="flex-box">
            <div class="is-bold size-4">访视日期</div>
            <div class="status-text">筛选中</div>
          </div>
          <div>
            <img class="switch-icon" src="../../assets/icons/switch_icon.png" @click="handleSwitch"/>
          </div>
        </div>
        <div class="flex-box flex-between">
          <div>图标1234</div>
          <div>01053</div>
          <div>筛选期</div>
        </div>
      </div>

      <!-- 表单详情 -->
      <RightContent/>

    </div>
  </div>
</template>

<style scoped lang="scss">
.border-line {
  border-bottom: 0.01rem solid #EEEEEE;
}

.status-text {
  background-color: #FDF1EB;
  color: #FF820D;
  font-size: 0.3rem;
  font-weight: 500;
  margin-left: 0.1rem;
  padding: 0.05rem 0.1rem;
  border-radius: 0.1rem;
  position: relative;
  top: -0.05rem;
}

.switch-icon {
  width: 0.6rem;
  height: 0.6rem;
}
</style>
